<template>
  <div
    v-if="element && element.key"
    class="portal-widget-view"
    :class="{ active: select && select.key == element.key }"
    :label="element.name"
    @click.stop="handleSelectWidget(index)"
  >
    <template v-if="element.type == 'smallPage'">
      <card-container :data="data" :element="element" source="design" />
    </template>
    <div class="portal-widget-view-action">
      <span title="设置" @click.stop="handleWidgetOpensSet(index)"><setting-outlined /></span>
      <span title="拖动小页"><drag-outlined /></span>
      <span title="删除小页" @click.stop="handleWidgetDelete(index)"><delete-outlined /></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { SettingOutlined, DragOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import CardContainer from './CardContainer.vue';

const props = defineProps({
  /** 门户小页配置信息 */
  data: { type: Object, default: null },
  /** 选中的小页 */
  select: { type: Object, default: null },
  /** 当前的小页 */
  element: { type: Object, default: null },
  /** 当前的小页下标 */
  index: { type: Number, default: 0 },
  /** 配置包含的小页 */
  layout: { type: Object, default: null }
});

const porletList = toRef(props, 'data');
const emit = defineEmits(['handleSelectWidget', 'move', 'handleWidgetOpensSet']);
function handleSelectWidget(index) {
  emit('handleSelectWidget', index);
}
function handleWidgetOpensSet(index) {
  emit('handleWidgetOpensSet', index);
}
/** 选中 */
function handleWidgetDelete(index) {
  emit('move', props.data.list[index].url);
  porletList.value.list.splice(index, 1);
}
</script>
